<template>
  <div class="flex">
    <p  class="bg-info text-center" style="padding: 8px;">
      单值管理
      <span class="btn btn-link add-postition" @click="add()">新增</span>
    </p>
    <div class="form-inline auto" style="margin-bottom: 5px;">
      <label for="">参数名称：</label>
      <input type="text" class="form-control"  placeholder='请输入查找的参数名' v-model="param" @keyup.enter="filterParams(param)">

      <button class="btn btn-success width-80" @click="filterParams(param)">查询</button>
    </div>
    <div class="span">
      <partial-view v-ref:single-load>
        <data-grid :model="model" v-ref:grid >
          <template partial='head'>
            <tr>
              <th>序号</th>
              <th>名称</th>
              <th>参数值</th>
              <th>操作</th>
            </tr>
          </template>
          <template partial='body'>
            <td>{{$index+1}}</td>
            <td>{{row.name}}</td>
            <!-- <td>{{row}}</td> -->
            <td>
              {{row.value}}
              <!-- <input type="text" v-model="row"> -->
              <!-- <input type="text" v-model="row.value" @dblclick.stop="$parent.$parent.modify(row, $key)"
              :class="{'edit-tree': $parent.$parent.key === $key, 'no-edit': $parent.$parent.key !== $key}"
              :readonly="$parent.$parent.key !== $key" @blur="$parent.$parent.clear(row, $key)"> -->
            </td>

            <td class="flex-around">
              <button type="button" name="button" class="btn btn-link" @click.stop="$parent.$parent.$parent.modifyParam(row)">修改</button>
              <button type="button" name="button" class="btn btn-link" @click.stop="$parent.$parent.$parent.deleteItem(row)">删除</button>
            </td>
          </template>
        </data-grid>
      </partial-view>
    </div>
    <modal :show.sync="show" v-ref:modal backdrop="false">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="close"><span>&times;</span></button>
        <h4 class="modal-title">单值配置</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="from-group">
          <label for="">单值名称</label>
          <input type="text" class="form-control" v-model="selectItem.name">
        </div>
        <div class="from-group">
          <label for="">单值内容</label>
          <input type="text" class="form-control" v-model="selectItem.value">
        </div>

      </article>

      <footer slot="modal-footer" class="modal-footer">
        <button v-show="show" type="button" class="btn btn-default" @click='close'>取消</button>
        <button v-show="show" type="button" class="btn btn-success width-80" @click='confirm'>确认</button>
      </footer>
    </modal>
  </div>
</template>
<script>
import AppData from '../../../stores/AppData'

export default {
  title: '用户操作',
  data () {
    return {
      selectItem: {
        name: '',
        value: ''
      },
      params: null,
      model: {
        rows: []
      },
      show: false
    }
  },
  ready () {
    // this.model.rows = AppData.singleValues
    this.loadSingle()
  },
  methods: {
    loadSingle () {
      this.$refs.singleLoad.load('rs/sql/singleTable', {data: {tablename: 't_singlevalue', condition: '1=1'}}).then((res) => {
        this.model.rows = this.params = res.data
      })
    },
    deleteItem (row) {
      this.$showMessage('删除后不可恢复，确认删除吗？', ['confirm', 'cancel']).then((res) => {
        if (res === 'confirm') {
          this.$refs.singleLoad.load('rs/logic/deleteValue', {tablename: 't_singlevalue', id: row.id}).then((res) => {
            this.loadSingle()
          })
        }
      })
    },
    filterParams (param) {
        if (param && param !== "") {
          // this.model.rows = []
          this.model.rows = this.params.filter((item) => {
            return item.name.includes(param)
          })
          // for (var i = 0; i < keys.length; i++) {
          //   this.model.rows[keys[i]] = item.name[keys[i]]
          // }
        }else {
          this.model.rows = this.params
        }
    },
    add () {
      this.show = true
    },
    modifyParam (row) {
      this.show = true
      // this.selectItem = row
      this.selectItem.name = row.name
      this.selectItem.id = row.id
      this.selectItem.value = row.value
    },
    confirm () {
      this.$refs.singleLoad.load('rs/entity/t_singlevalue', this.selectItem).then((res) => {
        this.show = false
        // 如果没有id，需要在数组中添加
        this.loadSingle()
        this.selectItem = {
          name: '',
          value: ''
        }
      })
    },
    // 关闭模态框
    close () {
      this.show = false
      this.selectItem = {
        name: '',
        value: ''
      }
    }
    // modify (row, key) {
    //   this.value = row
    //   this.key = key
    // },
    // clear (row, key) {
    //   if (this.key) {
    //     this.model.rows[key] = this.value
    //     this.value = null
    //     this.key = null
    //   }
    // }
  }

}
</script>
